<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steam游戏商城 - 新增游戏</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --steam-primary: #1b2838;
            --steam-secondary: #2a475e;
            --steam-accent: #66c0f4;
            --steam-light: #c7d5e0;
        }

        body {
            background: linear-gradient(135deg, #1b2838 0%, #171a21 100%);
            color: #c7d5e0;
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .steam-header {
            background-color: rgba(23, 26, 33, 0.95);
            border-bottom: 1px solid #66c0f4;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .steam-card {
            background: linear-gradient(145deg, #1b2838, #2a475e);
            border-radius: 8px;
            border: 1px solid #66c0f4;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            transition: transform 0.3s ease;
        }

        .steam-card:hover {
            transform: translateY(-5px);
        }

        .form-control, .form-select {
            background-color: rgba(42, 71, 94, 0.6);
            border: 1px solid #66c0f4;
            color: #c7d5e0;
        }

        .form-control:focus, .form-select:focus {
            background-color: rgba(42, 71, 94, 0.8);
            border-color: #66c0f4;
            color: #fff;
            box-shadow: 0 0 0 0.25rem rgba(102, 192, 244, 0.25);
        }

        .btn-steam {
            background: linear-gradient(to right, #47bfff 0%, #1a44c2 100%);
            border: none;
            font-weight: bold;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .btn-steam:hover {
            background: linear-gradient(to right, #66c0f4 0%, #2a5bc7 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(102, 192, 244, 0.3);
        }

        .preview-container {
            border: 2px dashed #66c0f4;
            border-radius: 8px;
            min-height: 200px;
            background: rgba(42, 71, 94, 0.3);
            transition: all 0.3s ease;
        }

        .preview-container:hover {
            background: rgba(42, 71, 94, 0.5);
        }

        .screenshot-preview {
            height: 120px;
            object-fit: cover;
            border: 1px solid #66c0f4;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .screenshot-preview:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(102, 192, 244, 0.4);
        }

        .form-label {
            color: #66c0f4;
            font-weight: 600;
        }

        .steam-footer {
            background-color: rgba(23, 26, 33, 0.95);
            border-top: 1px solid #66c0f4;
        }

        .error-message {
            color: #ff6b6b;
            font-size: 0.85rem;
            margin-top: 0.25rem;
        }

        .section-title {
            color: #66c0f4;
            border-left: 4px solid #66c0f4;
            padding-left: 12px;
            margin: 20px 0 15px;
        }

        .character-count {
            font-size: 0.8rem;
            color: #8f98a0;
            text-align: right;
        }

        .character-count.warning {
            color: #ffcc00;
        }

        .character-count.error {
            color: #ff6b6b;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="steam-header py-3">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <i class="fab fa-steam fa-2x me-2" style="color: #66c0f4;"></i>
                <h1 class="h4 mb-0">Steam游戏商城</h1>
            </div>
            <div>
                <a href="/admin/games" class="btn btn-sm btn-outline-light me-2">
                    <i class="fas fa-user me-1"></i>管理员中心
                </a>
                <a href="/logout" class="btn btn-sm btn-steam">
                    <i class="fas fa-sign-out-alt me-1"></i>退出登录
                </a>
            </div>
        </div>
    </div>
</header>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- 页面标题和操作按钮 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0"><i class="fas fa-plus-circle me-2"></i>添加新游戏</h2>
                <a href="/admin/games" class="btn btn-sm btn-outline-light">
                    <i class="fas fa-arrow-left me-1"></i>返回游戏列表
                </a>
            </div>

            <!-- 成功消息 -->
            <div class="alert alert-success d-flex align-items-center" role="alert" style="display: none !important;">
                <i class="fas fa-check-circle me-2"></i>
                <div>游戏添加成功！</div>
            </div>

            <!-- 主表单卡片 -->
            <div class="steam-card p-4 mb-4">
                <form id="gameForm" method="post" action="/admin/games/add">
                    <!-- 游戏基本信息部分 -->
                    <h3 class="section-title">基本信息</h3>
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">游戏名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required>
                            <div class="error-message" id="nameError"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="price" class="form-label">价格 (¥) <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="price" name="price" min="0" max="9999.99" step="0.01" required>
                            <div class="error-message" id="priceError"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="producer" class="form-label">发行商 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="producer" name="producer" required>
                            <div class="error-message" id="producerError"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="launchDate" class="form-label">发行日期 <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="launchDate" name="launchDate" required>
                            <div class="error-message" id="launchDateError"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="category" class="form-label">游戏分类 <span class="text-danger">*</span></label>
                            <select class="form-select" id="category" name="category" required>
                                <option value="">请选择分类</option>
                                <option value="Simulation">Simulation</option>
                                <option value="TPS">TPS</option>
                                <option value="FPS">FPS</option>
                                <option value="RPG">RPG</option>
                                <option value="BattleRoyale">BattleRoyale</option>
                                <option value="Action">Action</option>
                                <option value="Sandbox">Sandbox</option>
                            </select>
                            <div class="error-message" id="categoryError"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="type" class="form-label">游戏类型</label>
                            <select class="form-select" id="type" name="type">
                                <option value="">请选择类型</option>
                                <option value="模拟游戏">模拟游戏</option>
                                <option value="第三人称射击游戏">第三人称射击游戏</option>
                                <option value="第一人称射击游戏">第一人称射击游戏</option>
                                <option value="角色扮演游戏">角色扮演游戏</option>
                                <option value="大逃杀游戏">大逃杀游戏</option>
                                <option value="第一人称射击游戏">第一人称射击游戏</option>
                                <option value="动作游戏">动作游戏</option>
                                <option value="沙盒游戏">沙盒游戏</option>
                            </select>
                        </div>
                    </div>

                    <!-- 游戏描述部分 -->
                    <h3 class="section-title">游戏描述</h3>
                    <div class="mb-4">
                        <label for="description" class="form-label">游戏描述 <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="description" name="description" rows="5" minlength="20" maxlength="2000" required></textarea>
                        <div class="character-count" id="descriptionCount">0/2000 字符</div>
                        <div class="error-message" id="descriptionError"></div>
                    </div>

                    <!-- 游戏图片部分 -->
                    <h3 class="section-title">游戏图片</h3>
                    <div class="row mb-4">
                        <!-- 封面图片 -->
                        <div class="col-md-6 mb-4">
                            <label for="imageUrl" class="form-label">封面图片URL <span class="text-danger">*</span></label>
                            <!-- 修改：将name属性从coverImageUrl改为imageUrl -->
                            <input type="text" class="form-control mb-2" id="imageUrl" name="imageUrl" required>
                            <div class="error-message" id="coverImageError"></div>

                            <div class="preview-container p-3 mt-3 text-center">
                                <div id="coverPreview" class="d-flex align-items-center justify-content-center h-100">
                                    <div class="text-center">
                                        <i class="fas fa-image fa-3x mb-2" style="color: #66c0f4;"></i>
                                        <p class="mb-0">封面图片预览</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- 表单操作按钮 -->
                    <div class="d-flex justify-content-end mt-4">
                        <button type="reset" class="btn btn-outline-light me-3">
                            <i class="fas fa-undo me-1"></i>重置表单
                        </button>
                        <button type="submit" class="btn btn-steam">
                            <i class="fas fa-save me-1"></i>添加游戏
                        </button>
                    </div>
                </form>
            </div>

            <!-- 示例游戏卡片 -->
            <div class="steam-card p-4">
                <h3 class="section-title">预览效果</h3>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card bg-dark border-secondary h-100">
                            <div class="card-img-top bg-secondary" style="height: 200px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-gamepad fa-3x text-light"></i>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">游戏名称</h5>
                                <p class="card-text text-muted">发行商</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-info">分类</span>
                                    <span class="text-warning">¥0.00</span>
                                </div>
                            </div>
                            <div class="card-footer d-flex justify-content-between">
                                <small class="text-muted">发行日期: 2023-01-01</small>
                                <span class="badge bg-success">已发布</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <p class="fst-italic">"这里是游戏描述预览，将会显示您输入的游戏描述内容..."</p>
                        <div class="d-flex mt-3">
                            <div class="me-2" style="width: 100px; height: 60px; background: #2a475e; border: 1px solid #66c0f4;"></div>
                            <div class="me-2" style="width: 100px; height: 60px; background: #2a475e; border: 1px solid #66c0f4;"></div>
                            <div style="width: 100px; height: 60px; background: #2a475e; border: 1px solid #66c0f4;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="steam-footer py-4 mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="mb-3"><i class="fab fa-steam me-2"></i>Steam游戏商城</h5>
                <p class="mb-0 text-muted">提供最新、最热门的游戏体验</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p class="mb-1 text-muted">管理员控制台 v2.1.4</p>
                <p class="mb-0 text-muted">&copy; 2023 Steam游戏商城. 保留所有权利</p>
            </div>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 封面图片预览 - 修改：将id改为imageUrl
    document.getElementById('imageUrl').addEventListener('input', function() {
        const url = this.value.trim();
        const preview = document.getElementById('coverPreview');

        if (url) {
            preview.innerHTML = `<img src="${url}" class="img-fluid" style="max-height: 180px;">`;
        } else {
            preview.innerHTML = `
                    <div class="text-center">
                        <i class="fas fa-image fa-3x mb-2" style="color: #66c0f4;"></i>
                        <p class="mb-0">封面图片预览</p>
                    </div>
                `;
        }
    });

    // 截图预览
    function updateScreenshotPreview(inputId, previewId) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);

        if (input.value.trim()) {
            preview.src = input.value;
            preview.classList.remove('d-none');
        } else {
            preview.src = '';
            preview.classList.add('d-none');
        }
    }

    // 为每个截图输入框添加事件监听
    ['screenshot1Url', 'screenshot2Url', 'screenshot3Url'].forEach((id, index) => {
        document.getElementById(id).addEventListener('input', () => {
            updateScreenshotPreview(id, `preview${index + 1}`);
        });
    });

    // 描述字符计数
    const descriptionTextarea = document.getElementById('description');
    const descriptionCount = document.getElementById('descriptionCount');

    descriptionTextarea.addEventListener('input', function() {
        const length = this.value.length;
        descriptionCount.textContent = `${length}/2000 字符`;

        if (length > 1900 && length < 2000) {
            descriptionCount.className = 'character-count warning';
        } else if (length >= 2000) {
            descriptionCount.className = 'character-count error';
        } else {
            descriptionCount.className = 'character-count';
        }
    });

    // 表单验证
    document.getElementById('gameForm').addEventListener('submit', function(e) {
        let isValid = true;

        // 重置错误信息
        document.querySelectorAll('.error-message').forEach(el => el.textContent = '');

        // 验证游戏名称
        const name = document.getElementById('name').value.trim();
        if (!name) {
            document.getElementById('nameError').textContent = '游戏名称不能为空';
            isValid = false;
        } else if (name.length > 100) {
            document.getElementById('nameError').textContent = '游戏名称不能超过100个字符';
            isValid = false;
        }

        // 验证价格
        const price = parseFloat(document.getElementById('price').value);
        if (isNaN(price)) {
            document.getElementById('priceError').textContent = '价格不能为空';
            isValid = false;
        } else if (price < 0) {
            document.getElementById('priceError').textContent = '价格不能为负数';
            isValid = false;
        } else if (price > 9999.99) {
            document.getElementById('priceError').textContent = '价格不能超过9999.99';
            isValid = false;
        }

        // 验证描述
        const description = document.getElementById('description').value.trim();
        if (!description) {
            document.getElementById('descriptionError').textContent = '游戏描述不能为空';
            isValid = false;
        } else if (description.length < 20) {
            document.getElementById('descriptionError').textContent = '游戏描述需至少20个字符';
            isValid = false;
        } else if (description.length > 2000) {
            document.getElementById('descriptionError').textContent = '游戏描述不能超过2000个字符';
            isValid = false;
        }

        // 验证发行商
        const producer = document.getElementById('producer').value.trim();
        if (!producer) {
            document.getElementById('producerError').textContent = '发行商不能为空';
            isValid = false;
        } else if (producer.length > 100) {
            document.getElementById('producerError').textContent = '发行商名称不能超过100个字符';
            isValid = false;
        }

        // 验证分类
        const category = document.getElementById('category').value;
        if (!category) {
            document.getElementById('categoryError').textContent = '游戏分类不能为空';
            isValid = false;
        }

        // 验证封面图片 - 修改：将id改为imageUrl
        const coverImageUrl = document.getElementById('imageUrl').value.trim();
        if (!coverImageUrl) {
            document.getElementById('coverImageError').textContent = '封面图片URL不能为空';
            isValid = false;
        }

        // 验证发行日期
        const launchDate = document.getElementById('launchDate').value;
        if (!launchDate) {
            document.getElementById('launchDateError').textContent = '发行日期不能为空';
            isValid = false;
        }

        if (!isValid) {
            e.preventDefault();
        }
    });

    // 设置默认日期为今天
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('launchDate').value = today;
</script>
</body>
</html>